<template>
    <div class="comment-body">
        <div class="comment-title">
            <div class="title">评论<span class="count">{{ commentListInfo.totalCount }}</span>
            </div>
            <div class="tab">
                <span @click="changeOrderType(0)" :class="['tab-item', orderType == 0 ? 'active' : '']">热榜</span>
                <el-divider direction="vertical"></el-divider>
                <span @click="changeOrderType(1)" :class="['tab-item', orderType == 1 ? 'active' : '']">最新</span>
            </div>
        </div>
        <!-- 发送评论 -->
        <div class="comment-form-panel">
            <PostCommon avatatWidth="50" :userId="currentUserInfo.userId"
                :showInsertImg="currentUserInfo.userId != null" :articleId="articleId" :pCommentId="0"
                @postCommentFinish="postCommentFinish" :replyUserId="null"></PostCommon>
        </div>
        <div class="comment-list">
            <DataList :noDataMsg="'暂无评论，快来抢沙发吧'" :dataSource="commentListInfo" :loading="loading"
                @loadData="loadComment">
                <template #default="{ data }">
                    <CommonListItem :articleId="articleId" :articleUserId="articleUserId" :commentData="data"
                        :currentUserId=currentUserInfo.userId @hiddenReply="hiddenAllReplyHandler"
                        @reloadData="loadComment">
                    </CommonListItem>
                </template>
            </DataList>
        </div>
    </div>
</template>

<script setup>
import PostCommon from './PostCommon.vue';
import CommonListItem from './CommonListItem.vue';
import { getCurrentInstance, watch } from 'vue';
import { ref, defineProps } from 'vue';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const store = useStore();

const props = defineProps({
    articleId: {
        type: String,
    },
    articleUserId: {
        type: String,
    }
});

const api = {
    loadComment: '/comment/loadComment',
};





// 排序
const orderType = ref(0);
const changeOrderType = (type) => {
    orderType.value = type;
    loadComment();
}

// 评论列表
const loading = ref(null);
const commentListInfo = ref({});

let loadComment = async () => {
    let params = {
        articleId: props.articleId,
        pageNo: commentListInfo.value.pageNo,
        orderType: orderType.value,
    }
    loading.value = true;
    let res = await proxy.Request({
        url: api.loadComment,
        showLoading: false,
        params: params
    })
    loading.value = false;
    if (!res) return;
    commentListInfo.value = res.data;
}
loadComment();

// 隐藏所有回复框
const hiddenAllReplyHandler = () => {
    commentListInfo.value.list.forEach((item) => {
        item.showReply = false;
    });
}

// 评论发布成功
const emit = defineEmits(["updateCommentCount"]);
const postCommentFinish = (resultData) => {
    commentListInfo.value.list.unshift(resultData);
    let totalCount = commentListInfo.value.totalCount + 1;
    commentListInfo.value.totalCount = totalCount;
    emit('updateCommentCount', totalCount)
}

// 当前用户信息
const currentUserInfo = ref({});

watch(() => store.state.loginUserInfo, (val) => {
    currentUserInfo.value = val || {};
},
    { immediate: true, deep: true }
);

</script>


<style lang="scss">
.comment-body {
    .comment-title {
        display: flex;
        align-items: center;

        .comment-form-panel {
            margin-top: 20px;
        }

        .title {
            font-size: 20px;

            .count {
                color: #909399;
                font-size: 14px;
                padding: 0px 10px;
            }
        }

        .tab {
            .tab-item {
                cursor: pointer;
            }

            .active {
                color: var(--link);
            }
        }
    }


}
</style>
